<template>
  <div class="warp">
    <div class="warp_auto">
      <div class="warp_top">
        <!--类型（条件）-->
        <span v-if="this.radio1 === 0" class="span_box">
          <el-switch
            v-model="radio1"
            active-color="#ff4949"
            :active-value="1"
            :inactive-value="0"
            inactive-text="类型"
            active-text="模板"
            inactive-color="#13ce66"
            @change="agreeChange($event)"
          />

          <div class="jiansuo-box one1">
            <span class="span_top">类型名称 : </span>
            <el-input
              v-model="keshiname"
              class="bed"
              placeholder="请输入类型名称"
            />
          </div>

          <div class="jiansuo-box two1">
            <span class="span_statr1">类型状态 : </span>
            <el-select
              v-model="value"
              placeholder="请选择状态"
              clearable
              class="zhuan"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <el-button
            type="primary"
            icon="el-icon-search"
            class="btn_"
            @click="btnleixin"
          >检索</el-button>
          <div class="newadd" @click="dialogFormVisiblelei = true">
            新增类型
          </div>
        </span>
        <!--模板（条件）-->
        <span v-if="this.radio1 === 1">
          <el-switch
            v-model="radio1"
            active-color="#409eff"
            :active-value="1"
            :inactive-value="0"
            inactive-text="类型"
            active-text="模板"
            inactive-color="#13ce66"
            @change="agreeChange($event)"
          />

          <div class="jiansuo-box1 three">
            <span class="span_top">模板名称 : </span>
            <el-input
              v-model="keshiname"
              class="bed1"
              placeholder="请输入模板名称"
            />
          </div>

          <div class="jiansuo-box1 four">
            <span class="span_statr1">模板状态 : </span>
            <el-select
              v-model="value"
              placeholder="请选择状态"
              clearable
              class="zhuan"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>

          <div class="jiansuo-box1 five">
            <span class="span_statr2">模板类型 : </span>
            <el-select
              v-model="valuelei"
              placeholder="请选择类型"
              clearable
              class="zhuan1"
            >
              <el-option
                v-for="item in arrlist"
                :key="item.id"
                :label="item.template_name"
                :value="item.id"
              />
            </el-select>
          </div>

          <div class="jiansuo-box1 six">
            <span class="span_statr3">日志形式 : </span>
            <el-select
              v-model="rizi"
              placeholder="请选择形式"
              clearable
              class="zhuan2"
            >
              <el-option
                v-for="item in rizixs"
                :key="item.id"
                :label="item.label"
                :value="item.id"
              />
            </el-select>
          </div>

          <el-button
            type="primary"
            icon="el-icon-search"
            class="btn_1"
            @click="btn"
          >检索</el-button>
          <div class="newadd1" @click="dialogFormVisible = true">新增模板</div>
        </span>
        <div class="two" />
      </div>
      <!--模板（表格）-->
      <div v-if="this.radio1 === 1">
        <el-table
          :data="listArr_"
          style="width: 100%"
          height="540"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            label="序号"
            prop="id"
            width="50"
            align="center"
            fixed
          />
          <el-table-column label="模板名称" width="160" align="center" fixed>
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.icu_log_template_item_name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="英文名称" width="180" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.icu_log_template_item_type
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="类型" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.template_name
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="日志形式" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.log_form === 0 ? "发生记录" : "过程记录"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="允许非计划终止" width="130" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.allow_unplanned === "0" ? "否" : "是"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="status"
            label="状态"
            width="180"
            align="center"
            header-align="center"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.status"
                class="tablescope"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
                @change="changeSwitch(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>

          <el-table-column label="模板内容开始" width="150" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.nursing_begin_content
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="模板内容结束" width="160" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.nursing_end_content
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="护理措施模板内容" width="160" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.nursing_unplanned_end_content
              }}</span>
            </template>
          </el-table-column>

          <el-table-column label="排序" width="100" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sort_num }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            align="center"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row)"
              >编辑</el-button>
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="no(scope)"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="yes(scope)"
                  >确定</el-button>
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                >删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 类型-->
      <div v-else-if="this.radio1 === 0">
        <el-table
          :data="arrlist"
          style="width: 100%"
          height="540"
          stripe
          :header-cell-style="{ background: '#d2e0f9', color: '#606266' }"
        >
          <el-table-column
            type="index"
            width="50"
            fixed
            align="center"
            label="序号"
          />
          <el-table-column label="类型名称" width="140" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{
                scope.row.template_name
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            property="status"
            width="180"
            label="状态"
            align="center"
            header-align="center"
          >
            <template scope="scope">
              <el-switch
                v-model="scope.row.status"
                class="tablescope"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
                @change="changeSwitchlei(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="排序" align="center">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.sort_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEditss(scope.row)"
              >编辑</el-button>
              <el-popover
                :ref="`popover-${scope.$index}`"
                trigger="click"
                placement="top"
                width="100"
              >
                <p class="el-icon-warning">确定删除</p>
                <div style="text-align: right; margin: 0">
                  <el-button
                    size="mini"
                    type="text"
                    @click="no(scope)"
                  >取消</el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="yess(scope)"
                  >确定</el-button>
                </div>
                <el-button
                  slot="reference"
                  size="mini"
                  style="margin-left: 10px"
                  type="danger"
                >删除</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- 类型 -->
        <div class="paging">
          <el-pagination
            :current-page="start"
            :page-size="PageSize"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCountss"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <!-- 模板 -->
      <component-dialog
        :dialog-visible="dialogVisible"
        :dialog-info="dialogInfo"
        @update:dialogVisible="dialogVisiblesss"
      />
      <!-- 类型 -->
      <componentDialogss
        :dialog-visible="dialogVisibless"
        :dialog-info="dialogInfoss"
        @update:dialogVisibless="dialogVisibles"
      />
      <!-- 新增模板 -->
      <span v-if="this.radio1 === 1">
        <el-dialog
          title="新增日志模板"
          :visible.sync="dialogFormVisible"
          class="mod_box"
          :close-on-click-modal="false"
          custom-class="role-mask"
        >
          <div style="height: 362px; overflow: hidden; overflow-y: scroll">
            <el-form
              ref="ruleForm"
              :model="ruleForm"
              :rules="rules"
              label-width="115px"
              class="demo-ruleForm"
            >
              <el-form-item label="模板名称 : " prop="icuLogTemplateItemName">
                <el-input
                  v-model="ruleForm.icuLogTemplateItemName"
                  placeholder="请输入模板名称"
                  class="el-inputer"
                />
              </el-form-item>
              <el-form-item label="英文名称 : " prop="icuLogTemplateItemType">
                <el-input
                  v-model="ruleForm.icuLogTemplateItemType"
                  placeholder="请输入类型名称"
                  class="el-inputer"
                />
              </el-form-item>
              <el-form-item label="类型 : " prop="icuLogTemplateId">
                <el-select
                  v-model="ruleForm.icuLogTemplateId"
                  placeholder="请选择模板类型"
                  clearable
                  class="el-inputer"
                >
                  <el-option
                    v-for="item in arrlist"
                    :key="item.id"
                    :label="item.template_name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="日志形式 : ">
                <el-radio-group v-model="ruleForm.radio">
                  <el-radio :label="0">发生记录</el-radio>
                  <el-radio :label="1">过程记录</el-radio>
                </el-radio-group>
              </el-form-item>
              <div v-if="this.ruleForm.radio === 0">
                <el-form-item label="同步至护理记录:" prop="synNursing">
                  <el-switch
                    v-model="ruleForm.synNursing"
                    class="tablescope2"
                    inactive-text="是"
                    active-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
                <el-form-item label="同步表名 : " prop="synTable">
                  <el-input
                    v-model="ruleForm.synTable"
                    placeholder="请输入同步表名"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步Code : " prop="synCode">
                  <el-input
                    v-model="ruleForm.synCode"
                    placeholder="请输入同步Code"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步方式 : " prop="synMethod">
                  <el-switch
                    v-model="ruleForm.synMethod"
                    class="tablescope2"
                    inactive-text="是"
                    active-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
                <el-form-item label="同步值 : " prop="synValue">
                  <el-input
                    v-model="ruleForm.synValue"
                    placeholder="请输入同步值"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步值列表 : " prop="synValueSelect">
                  <el-input
                    v-model="ruleForm.synValueSelect"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入同步值列表"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item
                  label="护理措施模板内容:"
                  prop="nursingBeginContent"
                  label-width="129px"
                >
                  <el-input
                    v-model="ruleForm.nursingBeginContent"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入措施模板内容"
                    class="el-inputer4"
                  />
                </el-form-item>
                <el-form-item label="排序 : " prop="sortNum">
                  <el-input
                    v-model="ruleForm.sortNum"
                    placeholder="请输入排序"
                    class="el-inputer1"
                  />
                </el-form-item>
              </div>

              <div v-else-if="this.ruleForm.radio === 1">
                <el-form-item label="同步至护理记录:" prop="synNursing">
                  <el-switch
                    v-model="ruleForm.synNursing"
                    class="tablescope2"
                    inactive-text="是"
                    active-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
                <el-form-item label="允许非计划终止:" prop="allowUnplanned">
                  <el-switch
                    v-model="ruleForm.allowUnplanned"
                    class="tablescope2"
                    inactive-text="是"
                    active-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
                <el-form-item label="同步表名 : " prop="synTable">
                  <el-input
                    v-model="ruleForm.synTable"
                    placeholder="请输入同步表名"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步Code : " prop="synCode">
                  <el-input
                    v-model="ruleForm.synCode"
                    placeholder="请输入同步Code"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步方式 : " prop="synMethod">
                  <el-switch
                    v-model="ruleForm.synMethod"
                    class="tablescope2"
                    inactive-text="是"
                    active-text="否"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#02538C"
                    inactive-color="#B9B9B9"
                  />
                </el-form-item>
                <el-form-item label="同步值 : " prop="synValue">
                  <el-input
                    v-model="ruleForm.synValue"
                    placeholder="请输入"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item label="同步值列表 : " prop="synValueSelect">
                  <el-input
                    v-model="ruleForm.synValueSelect"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item
                  label="护理措施模板内容开始:"
                  prop="nursingBeginContent"
                  class="el-form-item__labelduo"
                >
                  <el-input
                    v-model="ruleForm.nursingBeginContent"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item
                  label="护理措施模板内容结束:"
                  prop="nursingEndContent"
                  class="el-form-item__labelduo"
                >
                  <el-input
                    v-model="ruleForm.nursingEndContent"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入"
                    class="el-inputer"
                  />
                </el-form-item>
                <el-form-item
                  label="护理措施模板内容非结束:"
                  prop="nursingUnplannedEndContent"
                  class="el-form-item__labelduo"
                >
                  <el-input
                    v-model="ruleForm.nursingUnplannedEndContent"
                    type="textarea"
                    :rows="3"
                    placeholder="请输入"
                    class="el-inputer"
                  />
                </el-form-item>

                <el-form-item label="排序 : " prop="sortNum">
                  <el-input
                    v-model="ruleForm.sortNum"
                    placeholder="请输入"
                    class="el-inputer1"
                  />
                </el-form-item>
              </div>

              <el-form-item label="状态 : " prop="status">
                <el-switch
                  v-model="ruleForm.status"
                  class="tablescope1"
                  inactive-text="禁用"
                  active-text="启用"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#02538C"
                  inactive-color="#B9B9B9"
                />
              </el-form-item>
            </el-form>
          </div>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="(dialogFormVisible = false), submitForm('ruleForm')"
            >保 存</el-button>
          </div>
        </el-dialog>
      </span>
      <!-- 新增类型-->
      <span v-else-if="this.radio1 === 0">
        <el-dialog
          title="新增日志模板类型"
          :visible.sync="dialogFormVisiblelei"
          class="mod_box"
          custom-class="role-mask"
        >
          <el-form
            ref="leixFrom"
            :model="leixFrom"
            :rules="rules"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="类型名称 : " prop="templateName">
              <el-input
                v-model="leixFrom.templateName"
                placeholder="请输入类型名称"
                class="el-inputer"
              />
            </el-form-item>
            <el-form-item label="排序 : " prop="sortNum">
              <el-input
                v-model="leixFrom.sortNum"
                class="el-inputer1"
              />
            </el-form-item>
            <el-form-item label="状态 : " prop="status">
              <el-switch
                v-model="leixFrom.status"
                class="tablescope1"
                inactive-text="禁用"
                active-text="启用"
                :active-value="1"
                :inactive-value="0"
                active-color="#02538C"
                inactive-color="#B9B9B9"
              />
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisiblelei = false">取 消</el-button>
            <el-button
              :plain="true"
              type="primary"
              @click="
                (dialogFormVisiblelei = false), submitFormleix('leixFrom')
              "
            >保 存</el-button>
          </div>
        </el-dialog>
      </span>
    </div>
    <!-- switch-model -->
    <el-dialog title="状态更新" :visible.sync="dialogUpdata" class="mod_box1">
      <span>
        <i class="el-icon-warning" />此操作将会改变开关状态, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="(dialogUpdata = false), cancelSwitch()"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogUpdata = false), updataSwitch()"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- switch-lei-->
    <el-dialog
      title="状态更新"
      :visible.sync="dialogUpdataclei"
      class="mod_box1"
    >
      <span>
        <i class="el-icon-warning" />此操作将会改变开关状态, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button
          @click="(dialogUpdataclei = false), cancelSwitchlei()"
        >取 消</el-button>
        <el-button
          type="primary"
          @click="(dialogUpdataclei = false), updataSwitchlei()"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import componentDialog from '@/components/mask/icumoban'
import componentDialogss from '@/components/mask/iculeixin'

import {
  icuLogTemplateDictionaryupdate,
  icuLogTemplateDictionaryinsert,
  icuLogTemplatequeryList,
  icuLogTemplatedelete,
  icuLogTemplateItemDictionarygetList,
  icuLogTemplateItemDictionarydelete,
  icuLogTemplateItemDictionaryupdate,
  icuLogTemplateItemDictionaryinsert
} from '@/api/table'
import { MessageBox, Message } from 'element-ui'
import Diagnosis from '../interactive/diagnosis'

export default {
  components: {
    Diagnosis,
    componentDialog,
    componentDialogss
  },
  data() {
    return {
      dialogUpdata: false, // 开关model
      dialogUpdataclei: false, // 开关lei
      switchId: '',
      switchStatus: '',
      leiswitchId: '',
      leiswitchStatus: '',
      rizi: '', // 日志
      rizixs: [
        {
          id: '0',
          value: '0',
          label: '发生记录'
        },
        {
          id: '1',
          value: '1',
          label: '过程记录'
        }
      ],

      dialogFormVisiblelei: false,
      valuelei: '',
      radio1: 0,
      // 控制弹窗 显示
      dialogVisible: false,
      dialogVisibless: false,
      dialogInfoss: {},
      // 点击查看按钮  这条数据详细信息
      dialogInfo: {},
      listarr: null,
      listLoading: true,
      loading: false,
      keshiname: '',
      dialogFormVisible: false,
      del: false,
      ruleForm: {
        icuLogTemplateId: '',
        icuLogTemplateItemName: '',
        synTable: '',
        synCode: '',
        synMethod: '',
        synValue: '',
        synValueSelect: '',
        icuLogTemplateItemType: '',
        radio: 0,
        templateId: '',
        templateItemName: '',
        sortNum: '',
        nursingBeginContent: '',
        allowUnplanned: '',
        nursingEndContent: '',
        nursingUnplannedEndContent: '',
        status: ''
      },
      leixFrom: {
        templateName: '',
        status: '',
        sortNum: ''
      },
      rules: {
        icuLogTemplateItemName: [
          { required: true, message: '请输入模板名称', trigger: 'blur' }
        ],
        icuLogTemplateItemType: [
          { required: true, message: '请输入模板英文名称', trigger: 'blur' }
        ],
        sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        templateName: [
          { required: true, message: '请输入模板类型名称', trigger: 'blur' }
        ],
        icuLogTemplateId: [
          { required: true, message: '请选择模板类型', trigger: 'change' }
        ]
      },
      options: [
        {
          id: '0',
          value: '1',
          label: '启用'
        },
        {
          id: '1',
          value: '0',
          label: '禁用'
        }
      ],
      value: '',
      arr: [],
      arrlist: [],
      listArr_: [],
      start: 1, // 默认显示第几页
      startss: 1, // 类型
      totalCount: 0, // 总条数，根据接口获取数据长度(注意 : 这里不能为空)
      totalCountss: 0,
      pgeSizes: [10, 20, 30, 40], // 个数选择器（可修改）
      PageSize: 10, // 默认每页显示的条数（可修改）
      dialogVisible: false // 控制弹窗 显示
      // 点击查看按钮  这条数据详细信息
    }
  },
  created() {
    this.lastTime = new Date().getTime()
    // 类型
  },
  mounted() {
    this.list(this.PageSize, this.start)
    this.listss(this.PageSize, this.startss)
  },
  methods: {
    xuan(val) {
      console.log(val)
    },
    agreeChange(value) {
      this.radio1 = value
      console.log(value)

      if (this.radio1 === 1) {
        this.list(this.PageSize, this.start) // 模板
      } else if (this.radio1 === 0) {
        this.listss(this.PageSize, this.startss) // 类型
      }
    },
    yes(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id)
      const id = scope.row.id
      icuLogTemplateItemDictionarydelete({ id: id }).then((res) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.list(this.PageSize, this.start)
      })
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    // 删除类型
    yess(scope) {
      // 可以在这里执行删除数据的回调操作.......删除操作......
      console.log(scope.row.id)
      const id = scope.row.id
      icuLogTemplatedelete({ id: id }).then((res) => {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
        this.listss(this.PageSize, this.startss)
      })
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    no(scope) {
      this.$message('取消删除')
      scope._self.$refs[`popover-${scope.$index}`].doClose()
    },
    // 新增模板
    submitForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          icuLogTemplateItemDictionaryinsert(this.ruleForm).then((res) => {
            this.listArr_ = res.data
            this.list(this.PageSize, this.start)
          })
        } else {
          this.$message({
            message: '请填写必填项！',
            type: 'warning',
            duration: 1500
          })
          this.dialogFormVisible = true
          return false
        }
      })
    },
    // 新增类型
    submitFormleix(leixFrom) {
      this.$refs[leixFrom].validate((valid) => {
        if (valid) {
          icuLogTemplateDictionaryinsert(this.leixFrom).then((res) => {
            this.arrlist = res.data
            this.listss(this.PageSize, this.startss)
          })
        } else {
          this.$message({
            message: '请填写必填项！',
            type: 'warning',
            duration: 1500
          })
          this.dialogFormVisiblelei = true
          return false
        }
      })
    },

    // 搜索按钮
    btn() {
      icuLogTemplateItemDictionarygetList({
        icuLogTemplateItemName: this.keshiname,
        logForm: this.rizi,
        icuLogTemplateId: this.valuelei,
        status: this.value === '' ? null : Number(this.value),
        size: this.PageSize,
        start: this.start
      }).then((res) => {
        this.listArr_ = res.data
        this.totalCount = res.totalCount
      })
    },
    // 类型
    btnleixin() {
      icuLogTemplatequeryList({
        status: this.value === '' ? null : Number(this.value),
        size: this.PageSize,
        start: this.startss,
        templateName: this.keshiname
      }).then((res) => {
        this.arrlist = res.data
        this.totalCountss = res.totalCount
      })
    },
    list(n1, n2) {
      icuLogTemplateItemDictionarygetList({
        size: n1,
        start: n2
      }).then((res) => {
        this.listArr_ = res.data
        this.totalCount = res.totalCount
      })
    },
    // //类型
    listss(n1, n2) {
      icuLogTemplatequeryList({
        size: n1,
        start: n2
      }).then((res) => {
        this.arrlist = res.data
        this.totalCountss = res.totalCount
      })
    },
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      this.listss(val, 1)
      // 注意 : 在改变每页显示的条数时，要将页码显示到第一页
      this.start = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.start = val
      // 切换页码时，要获取每页显示的条数

      this.listss(this.PageSize, this.start)
    },
    // ////////////////////////////////////类型
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val
      // 点击每页显示的条数时，显示第一页
      this.list(val, 1)
      // 注意 : 在改变每页显示的条数时，要将页码显示到第一页
      this.startss = 1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.startss = val
      // 切换页码时，要获取每页显示的条数

      this.list(this.PageSize, this.startss)
    },
    // ///
    handleEdit(info) {
      // 弹窗打开
      this.dialogVisible = true
      this.dialogInfo = info
    },
    handleEditss(info) {
      this.dialogVisibless = true
      this.dialogInfoss = info
    },
    // 子组件传 过来的 数据
    dialogVisiblesss(v) {
      this.dialogVisible = v
      console.log(v)
    },
    // 子组件传 过来的 数据
    dialogVisibles(v) {
      this.dialogVisibless = v
      console.log(v)
    },
    handleDelete(index, row) {
      console.log(index, row)
    },

    change: function(index, row) {
      console.log(index, row, '---')
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 列表开关的id 模板
    changeSwitch(index, row) {
      this.switchId = row.id
      this.switchStatus = row.status
      this.dialogUpdata = true
    },
    // 保存开关状态-确认
    updataSwitch() {
      icuLogTemplateItemDictionaryupdate({
        id: this.switchId,
        status: this.switchStatus
      }).then((res) => {
        this.list(this.PageSize, this.start)
      })
    },
    // 保存开关状态-取消
    cancelSwitch() {
      this.list(this.PageSize, this.start) // 重新获取表格
    },

    // 列表开关的id 类型
    changeSwitchlei(index, row) {
      this.leiswitchId = row.id
      this.leiswitchStatus = row.status
      this.dialogUpdataclei = true
    },
    // 保存开关状态-确认
    updataSwitchlei() {
      icuLogTemplateDictionaryupdate({
        id: this.leiswitchId,
        status: this.leiswitchStatus
      }).then((res) => {
        this.listss(this.PageSize, this.start)
      })
    },
    // 保存开关状态-取消
    cancelSwitchlei() {
      this.listss(this.PageSize, this.start) // 重新获取表格
    },

    change(index) {
      console.log(index)
    }
  }
}
</script>
<style lang="scss" scoped>
.warp {
  width: 100%;
  height: 100%;

  .warp_auto {
    width: 97%;
    height: 50px;
    margin: 0 auto;

    .warp_top {
      width: 100%;
      height: auto;
      margin-top: 2px;

      .jiansuo-box {
        display: inline-block;
        height: 77px;
        padding-top: 14px;
        box-sizing: border-box;
      }
      .jiansuo-box1 {
        display: inline-block;
        height: 60px;
        padding-top: 14px;
      }

      .one1 {
        width: 13%;
      }
      .two1 {
        width: 15%;
      }
      .three {
        width: 13%;
      }
      .four {
        width: 20%;
      }
      .five {
        width: 20%;
      }
      .six {
        width: 20%;
      }

      .span_box {
        width: 100%;
        height: 50px;
      }

      .ivu-card-body {
        width: 100%;
        height: 77px;
      }

      .span_top {
        position: relative;
        left: 18px;
        font-size: 15px;
        line-height: 50px;
      }

      .span_statr {
        position: relative;
        left: 40px;
        font-size: 15px;
        line-height: 50px;
      }

      .span_statr1 {
        position: relative;
        left: 40px;
        font-size: 15px;
        line-height: 50px;
      }

      .span_statr2 {
        position: relative;
        left: 40px;
        font-size: 15px;
        line-height: 50px;
      }

      .span_statr3 {
        position: relative;
        left: 40px;
        font-size: 15px;
        line-height: 50px;
      }

      .bed {
        width: 200px;
        position: relative;
        left: 10px;
      }

      .zhuan {
        position: relative;
        left: 36px;
      }

      .zhuan1 {
        position: relative;
        left: 36px;
      }

      .zhuan2 {
        position: relative;
        left: 36px;
      }

      .btn_ {
        position: relative;
        left: 181px;
      }

      .newadd {
        width: 89px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: 190px;
        font-size: 15px;
        border-radius: 5px;
        display: inline-block;
        background: #19be6b;
      }

      .btn_1 {
        position: relative;
        left: 181px;
      }

      .newadd1 {
        width: 89px;
        height: 40px;
        color: #fff;
        line-height: 40px;
        cursor: pointer;
        text-align: center;
        position: relative;
        left: 190px;
        font-size: 15px;
        border-radius: 5px;
        display: inline-block;
        background: #19be6b;
      }
      .two {
        float: left;
        margin-left: 1px;
        margin-top: 52px;
      }
    }

    .department {
      position: relative;
    }

    .paging {
      float: right;
      margin-top: 30px;
      margin-bottom: 30px;
    }

    .mod_box {
      margin-left: 28%;
      width: 44%;
    }
    .mod_box1 {
      margin-left: 28%;
      width: 44%;
    }
    .adda {
      width: auto;
      height: 51px;
    }
    .demo-ruleForm {
      height: auto;
    }

    //表单的状态
    .tablescope {
      ::v-deep .el-switch__label--left {
        position: relative;
        left: 59px;
        color: #fff;
        z-index: -1111;
      }

      ::v-deep .el-switch__core {
        width: 58px !important;
      }

      ::v-deep .el-switch__label--right {
        position: relative;
        right: 59px;
        color: #fff;
        z-index: -1111;
      }

      ::v-deep .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
      }

      ::v-deep .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
      }
      ::v-deep .el-form-item__labelduo {
        line-height: 28px !important;
      }
    }

    //弹窗的状态
    .tablescope1 {
      position: relative !important;
      left: -37px !important;

      ::v-deep .el-switch__label--left {
        position: relative;
        left: 59px;
        color: #fff;
        z-index: -1111;
      }
      ::v-deep .el-switch__core {
        width: 58px !important;
      }
      ::v-deep .el-switch__label--right {
        position: relative;
        right: 59px;
        color: #fff;
        z-index: -1111;
      }
      ::v-deep .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
      }
      ::v-deep .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
      }
    }

    //弹窗里的是 否
    .tablescope2 {
      position: relative !important;
      left: -24px !important;

      ::v-deep .el-switch__label--left {
        position: relative;
        left: 48px;
        color: #fff;
        z-index: -1111;
      }
      ::v-deep .el-switch__core {
        width: 50px !important;
      }
      ::v-deep .el-switch__label--right {
        position: relative;
        right: 48px;
        color: #fff;
        z-index: -1111;
      }
      ::v-deep .el-switch__label--right.is-active {
        z-index: 1111;
        color: #fff !important;
      }
      ::v-deep .el-switch__label--left.is-active {
        z-index: 1111;
        color: #9c9c9c !important;
      }
    }

    .role-mask {
      border-radius: 6px;
    }

    .role-mask .el-dialog__header {
      border-bottom: 1px solid #e8eaec;
    }

    .role-mask .el-dialog__body {
      padding: 16px 16px 0px;
      color: #606266;
      font-size: 14px;
      word-break: break-all;
    }

    .role-mask .el-dialog__footer {
      border-top: 1px solid #e8eaec;
    }
  }
}
.el-table {
  overflow: auto;
}
.el-table__header-wrapper,
.el-table__body-wrapper,
.el-table__footer-wrapper {
  overflow: visible;
}
.el-table__body-wrapper {
  overflow-x: visible !important;
}
/* 这个是为了解决前面样式覆盖之后伪类带出来的竖线 */
.el-table::after {
  position: relative;
}

@media screen and (min-width: 1200px) and (max-width:1365px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 96%;
      height: 50px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        margin-top: 2px;

        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .jiansuo-box1 {
          display: inline-block;
          height: 60px;
          padding-top: 14px;
        }

        .one1 {
          width: 24%;
        }
        .two1 {
          width: 27%;
        }
        .three {
          width: 25%;
        }
        .four {
          width: 25%;
        }
        .five {
          width: 30%;
        }
        .six {
          width: 24%;
          margin-bottom: 20px;
        }

        .span_box {
          width: 100%;
          height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr {
          position: relative;
          left: 1%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 2%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 3%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr3 {
          position: relative;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 57%;
          position: relative;
          left: 7%;
        }

        .bed1 {
          width: 57%;
          position: relative;
          left: 8%;
        }

        .zhuan {
          position: relative;
          left: 2%;
          width: 57%;
        }

        .zhuan1 {
          position: relative;
          left: 3%;
          width: 64%;
          margin-right: 10%;
        }

        .zhuan2 {
          margin-left: 2%;
          width: 60%;
        }

        .btn_ {
          position: relative;
          left: 10%;
        }

        .btn_1 {
          position: relative;
          left: 46%;
        }

        .newadd {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 12% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .newadd1 {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 48% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .two {
          float: left;
          margin-left: 1px;
          margin-top: 51px;
        }
      }
      .mod_box {
        margin-left: 20%;
        width: 66%;
      }

      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 92%;
      }
      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 48%;
      }
      .el-inputer2 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 92%;
      }
      .el-inputer3 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 47%;
      }
      .el-inputer4 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 93%;
      }
    }
  }
  .mod_box1 {
    margin-left: 20%;
    width: 66%;
  }
}

@media screen and (min-width: 1366px) and (max-width:1600px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 97%;
      height: 50px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        margin-top: 2px;

        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .jiansuo-box1 {
          display: inline-block;
          height: 60px;
          padding-top: 14px;
        }

        .one1 {
          width: 24%;
        }
        .two1 {
          width: 27%;
        }
        .three {
          width: 28%;
        }
        .four {
          width: 28%;
        }
        .five {
          width: 28%;
        }
        .six {
          width: 36%;
          margin-bottom: 20px;
        }

        .span_box {
          width: 100%;
          height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr {
          position: relative;
          left: 1%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 4%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 6%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr3 {
          position: relative;
          left: 8%;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 50%;
          position: relative;
          left: 6%;
        }

        .bed1 {
          width: 60%;
          position: relative;
          left: 6%;
        }

        .zhuan {
          position: relative;
          left: 4%;
          width: 64%;
        }

        .zhuan1 {
          position: relative;
          left: 6%;
          width: 65%;
        }

        .zhuan2 {
          position: relative;
          left: 8%;
          width: 50%;
        }

        .btn_ {
          position: relative;
          left: 8%;
        }

        .btn_1 {
          position: relative;
          left: 39%;
        }

        .newadd {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 10% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .newadd1 {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 41% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .two {
          float: left;
          margin-left: 1px;
          margin-top: 51px;
        }
      }
      .mod_box {
        margin-left: 20%;
        width: 60%;
      }
      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 92%;
      }

      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 45%;
      }
      .el-inputer2 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 93%;
      }
      .el-inputer3 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 49%;
      }
      .el-inputer4 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 93%;
      }
    }
  }
  .mod_box1 {
    margin-left: 20%;
    width: 60%;
  }
}

@media screen and (min-width: 1800px) {
  .warp {
    width: 100%;
    height: 100%;

    .warp_auto {
      width: 97%;
      height: 50px;
      margin: 0 auto;

      .warp_top {
        width: 100%;
        height: auto;
        margin-top: 2px;

        .jiansuo-box {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }
        .jiansuo-box1 {
          display: inline-block;
          height: 77px;
          padding-top: 14px;
          box-sizing: border-box;
        }

        .one1 {
          width: 18%;
        }
        .two1 {
          width: 18%;
        }
        .three {
          width: 18%;
        }
        .four {
          width: 18%;
        }
        .five {
          width: 18%;
        }
        .six {
          width: 18%;
        }

        .span_statr {
          position: relative;
          left: 1%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr1 {
          position: relative;
          left: 2%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr2 {
          position: relative;
          left: 3%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_statr3 {
          position: relative;
          left: 4%;
          font-size: 15px;
          line-height: 50px;
        }

        .span_top {
          position: relative;
          left: 18px;
          font-size: 15px;
          line-height: 50px;
        }

        .bed {
          width: 60%;
          position: relative;
          left: 6%;
        }

        .bed1 {
          width: 56%;
          position: relative;
          left: 6%;
        }

        .zhuan {
          position: relative;
          left: 2%;
          width: 60%;
        }

        .zhuan1 {
          position: relative;
          left: 3%;
          width: 60%;
        }

        .zhuan2 {
          position: relative;
          left: 4%;
          width: 60%;
        }

        .btn_ {
          position: relative;
          left: 20%;
        }

        .newadd {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 22% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .btn_1 {
          position: relative;
          left: 6%;
        }

        .newadd1 {
          width: 89px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          cursor: pointer;
          text-align: center;
          position: relative;
          left: 8% !important;
          font-size: 15px;
          border-radius: 5px;
          display: inline-block;
          background: #19be6b;
        }

        .two {
          float: left;
          margin-left: 1px;
          margin-top: 51px;
        }
      }
      .mod_box {
        margin-left: 28%;
        width: 44%;
      }
      .el-inputer {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 92%;
      }

      .el-inputer1 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 50%;
      }
      .el-inputer2 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 91%;
      }
      .el-inputer3 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 50%;
      }
      .el-inputer4 {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 92%;
      }
    }
  }
  .mod_box1 {
    margin-left: 28%;
    width: 44%;
  }
}
</style>
